<template>
  <div class="historyLogo">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        
        <span>{{ $t('institutionSetting.jigou79') }}</span>
      </div>
      <div v-for="(item, index) in list" :key="index" class="history_item">
        <el-row>
          <el-col :span="9">
            <span>{{ $t('institutionSetting.jigou80') }}:</span>
          </el-col>
          <el-col :span="9">
            <!-- <span>{{ item.language === '50' ? '中文' : 'English' }}</span> -->
            <span v-show="item.language === '50'">中文</span>
            <span v-show="item.language === '51'">English</span>
            <span v-show="item.language === '123'">Português</span>
            
          </el-col>
          <el-col :span="6" class="delete_box">
            <i class="el-icon-delete" @click="deleteLogo(item)"></i>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="9">
            <span>{{ $t('institutionSetting.jigou81') }}:</span>
          </el-col>

          <el-col :span="9">
            
            <img class="logo" :src="item.attachedFile" alt="" />
            <!-- <img class="logo" src="https://oss.blzdentalcloud.com/194/20231220/2023-12-20_15-35-40_0004/%E7%83%9F%E8%8A%B12_0004_2023-12-20-DentalDiagram.png" alt="" /> -->
          </el-col>
        </el-row>
        <!-- <el-row class="active_btn" :gutter="10"> -->

        <!-- <el-col :span="24">
            <el-button :size="optionButtonSize" @click="deleteLogo(item)">{{ $t('add.add38') }}</el-button>
          </el-col> -->
        <!-- <el-col :span="24">
            <img class="logo" :src="item.attachedFile" alt="" />
          </el-col> -->
        <!-- </el-row> -->
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'historyLogo',

  data() {
    return {
      historyLogoList: [
        {
          language: '汉语',
          logo: 'https://lmg.jj20.com/up/allimg/1113/051220112022/200512112022-1-1200.jpg',
        },
        {
          language: '汉语',
          logo: 'https://lmg.jj20.com/up/allimg/1113/051220112022/200512112022-1-1200.jpg',
        },
        {
          language: '汉语',
          logo: 'https://lmg.jj20.com/up/allimg/1113/051220112022/200512112022-1-1200.jpg',
        },
        {
          language: '汉语',
          logo: 'https://lmg.jj20.com/up/allimg/1113/051220112022/200512112022-1-1200.jpg',
        },
        {
          language: '汉语',
          logo: 'https://lmg.jj20.com/up/allimg/1113/051220112022/200512112022-1-1200.jpg',
        },
      ],
    };
  },
  props: {
    list: {
      type: Array,
    },
  },

  mounted() {
    
   },

  methods: {
    toEdit(data) {
      this.$emit("getLogoData", data);
    },
    deleteLogo(tagItem) {
      this.$http
        .get(`/sys/organized/deleteLogo?institutionId=${localStorage.getItem('user_jg_id')}&logoType=${tagItem.language}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);

          } else {
            this.$emit("getSetting");
            // location.reload();
            return this.$message.success(this.$t('add.add35'));

          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.historyLogo {
  width: 22%;
  height: 100%;

  overflow: auto;

  .box-card {
    height: 100%;

    .history_item {
      border: 1px solid #ededed;
      margin-bottom: 20px;
      padding: 10px;
      border-radius: 10px;
      min-height: 140px;

      .delete_box {
        text-align: right;

        i {
          cursor: pointer;
        }
      }

      .el-row {
        margin-bottom: 20px;
      }

      .delete_box {
        text-align: right;

        i {
          cursor: pointer;
        }
      }

      .active_btn {
        .el-button--mini {
          width: 100%;
        }
      }
    }

    .logo {
      display: inline-block;

      height: 80px;
      object-fit: contain;
    }
  }

  ::v-deep .el-card__body {
    padding: 15px !important;
  }
}
</style>
